<template>
	<view>
		<view>
			<!--bindgetphonenumber  -->
			<!-- <button open-type="getPhoneNumber" type="primary" class="bindmobile" @getphonenumber="getPhoneNumber1">本机号码一键登录</button> -->
		</view>
		<view class="content">
			<view class="applicationlist">
				<view class="input-item" v-if="!iswaitload">
					<text class="tit">旧手机号</text>
					<view style="font-size: 16px;color: #333;">{{oldmobile}}</view>
					<!-- <input type="text" :value="oldmobile" :disabled="true" placeholder="请输入旧手机号码" maxlength="11" data-key="oldmobile" @input="inputChange" /> -->
				</view>
				<view class="input-item" style="margin-bottom:10px;position: relative;" v-if="!iswaitload">
					<text class="tit">验证码</text>
					<input :value="oldsecuritycode" type="text" placeholder="请输入验证码" placeholder-class="input-empty" maxlength="20"
					 data-key="oldsecuritycode" @input="inputChange" />
					<button type="default" @click="sendValide" class="securitycode">发送验证码</button>
				</view>
				<view class="input-item" v-if="iswaitload">
					<text class="tit">新手机号码</text>
					<input type="number" :value="newmobile" placeholder="请输入新的手机号码" maxlength="11" data-key="newmobile" @input="inputChange" />
				</view>
				<view class="input-item" style="margin-bottom:10px;position: relative;" v-if="iswaitload">
					<text class="tit">验证码</text>
					<input :value="newsecuritycode" type="text" placeholder="请输入验证码" placeholder-class="input-empty" maxlength="20"
					 data-key="newsecuritycode" @input="inputChange" />
					<button type="default" @click="sendValide" class="securitycode">发送验证码</button>
				</view>
				<view class="application" style="margin-top: 30px;" @click="submit">{{submitText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendValidaCode
	} from '@/common/loadUserInfo.js'
	export default {
		data() {
			return {
				submitText: '确认验证码',
				iswaitload: false,
				oldmobile: '',
				oldsecuritycode: '',
				newsecuritycode: '',
				showmodel: false,
				newmobile: '',
			}
		},
		onLoad() {
			this.iswaitload = false;
			this.oldmobile = uni.getStorageSync('userDetail').userPhone
		},
		methods: {
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			submit() {
				let that = this;
				if (that.iswaitload) {
					let data = {
						code: that.newsecuritycode,
						newPhone: that.newmobile
					}
					that.$Request.request('/api/user_center/resetPhone', 'POST', data).then(res => {
						if (res.status == 1) {
							that.$api.msg(res.msg || '更换成功');
							uni.navigateBack({

							})
						} else {

						}
					}).catch(err => {
						console.log('catch')
					})
				} else {
					if (that.oldsecuritycode == '' || that.oldmobile) {
						that.$api.msg('手机号或验证码错误')
					}
					let data = {
						phone: that.oldmobile,
						code: that.oldsecuritycode
					}
					that.$Request.request('/api/users/validPhone', 'POST', data).then(res => {
						if (res.status == 1) {
							that.$api.msg(res.msg || '验证通过');
							that.iswaitload = true;
							that.submitText = '绑定新号码'
						}
					})
				}
			},
			//发送验证码
			sendValide() {
				console.log(this.oldmobile)
				let that = this
				sendValidaCode({
					data: {
						phone: that.oldmobile
					},
					success: (res) => {
						that.$api.msg('验证码发送成功！')
					}

				})
			},
			confirm() {
				alert(this.invitation)
			},
			//通过绑定手机号登录
			getPhoneNumber1: function(e) {
				var ivObj = e.detail.iv
				var telObj = e.detail.encryptedData
				var codeObj = "";
				var that = this;
				console.log(e)
				let data = {
					session_key: uni.getStorageSync('session_key'),
					openid: uni.getStorageSync('openid'),
					encryptedData: telObj,
					iv: ivObj
				}
				that.$Request.request('/api/users/miniWxGetPhoneNumber', 'POST', data).then(res => {
					if (res.status == 1) {
						let userInfo = {
							loginName: res.data.phone,
							token: res.data.token,
						}
						uni.setStorageSync('userInfo', userInfo)
						that.$api.msg(res.msg)
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 200)

					}
				})
				// wx.request({
				// 	url: '', //接口地址

				// 	success: function(res) {
				// 		phoneObj = res.data.phoneNumber;
				// 		console.log("手机号=", phoneObj)
				// 		wx.setStorage({ //存储数据并准备发送给下一页使用
				// 			key: "phoneObj",
				// 			data: res.data.phoneNumber,
				// 		})
				// 	}
				// })	

				if (e.detail.errMsg == 'getPhoneNumber:user deny') {
					wx.navigateTo({
						url: '../index/index',
					})
					wx.navigateTo({
						url: '/subPackage/bindmobile/bindmobile',
					})
				} else { //允许授权执行跳转
					wx.navigateTo({
						url: '../index/index',
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		.securitycode {
			position: absolute;
			right: 40upx;
			width: 180upx;
			height: 50upx;
			line-height: 50upx;
			font-size: 24upx;
			background-color: #ff8e32 !important;
			bottom: 5px;
			color: #fff !important;
			z-index: 99;
		}

		.application {
			font-size: 14px;
			margin: 0 auto;
			width: 65%;
			background-color: #ff6600;
			color: #fff;
			text-align: center;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
		}

		.applicationlist {
			padding: 10px;
		}

		.input-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30upx;
			background: $page-color-light;
			height: 120upx;
			border-radius: 4px;
			margin-bottom: 50upx;

			&:last-child {
				margin-bottom: 0;
			}

			.tit {
				height: 50upx;
				line-height: 56upx;
				font-size: $font-sm+2upx;
				color: $font-color-base;
			}

			input {
				height: 60upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				width: 100%;
			}
		}
	}

	.bindmobile {
		width: 75%;
		// position: absolute;
		// transform: translateY(-40%);
		// transform: translateX(-50%);
		// top: 50%;
		// left: 50%;
	}

	.modal {
		background: black;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		opacity: 0.4;
	}

	.info {
		position: absolute;
		background-color: white;
		width: 80%;
		left: 50%;
		top: 41%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		font-size: 15px;
		border-radius: 10px;
		padding-bottom: 10px;

		.info-title {
			text-align: center;
			padding: 15px 10px;
			border-bottom: 1px solid #f2f2f2;
			position: relative;

			.info-icon {
				font-size: 17px;
				position: absolute;
				right: 5%;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.uni-form-item {
			display: flex;
			align-items: center;
			padding: 15px 10px;
		}

		.confirm {
			color: #007aff;
			text-align: center;
			padding: 10px 0px;
			border-top: 1px solid #f2f2f2;
		}

	}
</style>
